<template>
  <div class="top">
    <p class="text1">京东登录注册</p>
    <div class="zhu">
      <button class="yi">+86 &nbsp;v&nbsp;</button>
      <input type="text" placeholder="请输入手机号" class="phone" />
      <input
        type="text"
        placeholder="请输入收到的验证码"
        class="phone"
        id="yyy"
      />
      <button class="er">获取验证码</button>
    </div>
    <button class="get">注&nbsp;册</button>
    <div class="text2">
      <p>账号密码登录</p>
      <p>手机快速注册</p>
    </div>
    <p class="text3">———————&nbsp; &nbsp;其他登录方式&nbsp;&nbsp;—————————</p>
  </div>

</template>
<script>
export default {};
</script>

<style scoped>
.top{
  width:350px;
}
.text1 {
  text-align: center;
  font-weight: 500;
  margin-top: 1rem;
}
.zhu {
  /* display: flex; */
  justify-content: center;
  flex-direction: column;
  margin-top: 1rem;

}
.phone {
  width: 16rem;
  height: 3.125rem;
  border: none;
  border-bottom: 0.0625rem solid #eee;
}
.yi {
  border: none;
  border-bottom: 0.0625rem solid #eee;
  height: 3.225rem;
  background: none;
  margin-left: 1.5rem;
}
.er {
  border: none;
  border-bottom: 0.0625rem solid #eee;
  height: 3.26rem;
  background: none;
  color: #999;
}
#yyy {
  width: 14.5rem;
  margin-left: 1.5rem;
}
.get{
  width: 18rem;
  height: 3.125rem;
  margin-top:2rem;
  border-radius: 30px;
  border: none;
  background: rgb(224, 157, 157);
  color: #eee;
  margin-left: 1.5rem;
}
.text2{
  display: flex;
  justify-content: space-around;
  font-size: .75rem;
  margin-top:1.25rem;
  color: #999;
}
.text3{
  font-size: .5rem;
  margin-left: 1.5rem;
  margin-top:4.6875rem ;
  color: #999;
}
</style>